<template>
	<div v-cloak class="aui-wrapper aui-page__iframe">
		<div class="aui-content__wrapper">
			<div class="aui-content">
				<el-card shadow="never" class="aui-card--fill">
					<div class="mod-sys__menu">
						<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
							<el-form-item>
								<el-input v-model="dataForm.location" size="small" placeholder="库位编码" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<el-select v-model="dataForm.zonecode" size="small" placeholder="区">
									<el-option value="" label="--"></el-option>
									<el-option v-for="item in zoneList" :key="item.zonecode" :label="item.zonename"
										:value="item.zonecode">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-select v-model="dataForm.locType" size="small" placeholder="库位类型">
									<el-option value="" label="--"></el-option>
									<el-option v-for="item in locTypeList" ::key="item.list" :label="item.listname"
										:value="item.list">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-select v-model="dataForm.locCategory" size="small" placeholder="库位类别">
									<el-option value="" label="--"></el-option>
									<el-option v-for="item in locCategoryList" :key="item.list" :label="item.listname"
										:value="item.list">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-select v-model="dataForm.locStatus" size="small" placeholder="库位状态">
									<el-option value="" label="--"></el-option>
									<el-option v-for="item in locStatusList" :key="item.list" :label="item.listname"
										:value="item.list">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button size="small" @click="getDataList()">查询</el-button>
							</el-form-item>
							<el-form-item>
								<el-button size="small" type="primary"
										   @click="addOrUpdateHandle()" v-if="hasPermission('lswms:location:save')">新增</el-button>
							</el-form-item>
							<el-form-item>
								<el-button size="small" type="danger"
										   @click="deleteHandle()" v-if="hasPermission('lswms:location:delete')">删除</el-button>
							</el-form-item>
							<el-form-item>
								<el-button size="small" type="info"
										   @click="exportHandle()" v-if="hasPermission('lswms:location:export')" >导出</el-button>
							</el-form-item>
						</el-form>
						<el-table v-loading="dataListLoading" :data="dataList" border
							@selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle"
							style="width: 100%;">
							<el-table-column type="selection" header-align="center" align="center" width="50">
							</el-table-column>
							<el-table-column prop="location" label="库位编码" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="zonename" label="区" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="locTypestr" label="库位类型" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="locCategorystr" label="库位类别" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="locStatusstr" label="库位状态" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lane" label="巷道" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="laneSide" label="巷道侧边" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="laneDepth" label="巷道侧边的深度" header-align="center" align="center">
							</el-table-column>
							<!-- <el-table-column prop="ismixedsku" label="商品是否混放" header-align="center" align="center">
                                                        </el-table-column>
                                                        <el-table-column prop="ismixedlot1" label="lot1是否混放" header-align="center" align="center">
                                                        </el-table-column>
                                                        <el-table-column prop="ismixedlot2" label="lot2是否混放" header-align="center" align="center">
                                                        </el-table-column>
                                                        <el-table-column prop="ismixedlot3" label="lot3是否混放" header-align="center" align="center">
                                                        </el-table-column>
                                                        <el-table-column prop="ismixedlot4" label="lot4是否混放" header-align="center" align="center">
                                                        </el-table-column>
                                                        <el-table-column prop="ismixedlot5" label="lot5是否混放" header-align="center" align="center">
                                                        </el-table-column>
                                                        <el-table-column prop="ismixedlot6" label="lot6是否混放" header-align="center" align="center">
                                                        </el-table-column>
                                                        <el-table-column prop="ismixedlot7" label="lot7是否混放" header-align="center" align="center">
                                                        </el-table-column>
                                                        <el-table-column prop="ismixedlot8" label="lot8是否混放" header-align="center" align="center">
                                                        </el-table-column>
                                                        <el-table-column prop="ismixedlot9" label="lot9是否混放" header-align="center" align="center">
                                                        </el-table-column>
                                                        <el-table-column prop="ismixedlot10" label="lot10是否混放" header-align="center" align="center">
                                                        </el-table-column> -->
							<!-- <el-table-column prop="warehouse" label="仓库" header-align="center" align="center">
                                                        </el-table-column>
                                                        <el-table-column prop="length" label="长" header-align="center" align="center">
                                                        </el-table-column>
                                                        <el-table-column prop="width" label="宽" header-align="center" align="center">
                                                        </el-table-column>
                                                        <el-table-column prop="height" label="高" header-align="center" align="center">
                                                        </el-table-column>
                                                        <el-table-column prop="weight" label="重量" header-align="center" align="center">
                                                        </el-table-column> -->
							<el-table-column label='详情' type="expand">
								<template #default="props">
									<el-form label-position="left" inline class="demo-table-expand">
										<el-row>
											<el-col :span="4">
												<el-form-item label="排:" prop="locRow">
													<span>{{ props.row.locRow }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="列:" prop="locColumn">
													<span>{{ props.row.locColumn }}</span>
												</el-form-item>
											</el-col>

											<el-col :span="4">
												<el-form-item label="层:" prop="locLevel">
													<span>{{ props.row.locLevel }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="商品是否混放:" prop="ismixedskustr">
													<span>{{ props.row.ismixedskustr }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="箱是否混放:" prop="ismixedtraystr">
													<span>{{ props.row.ismixedtraystr }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="lot1是否混放:" prop="ismixedlot1str">
													<span>{{ props.row.ismixedlot1str }}</span>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="4">
												<el-form-item label="lot2是否混放:" prop="ismixedlot2str">
													<span>{{ props.row.ismixedlot2str }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="lot3是否混放:" prop="ismixedlot3str">
													<span>{{ props.row.ismixedlot3str }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="lot4是否混放:" prop="ismixedlot4str">
													<span>{{ props.row.ismixedlot4str }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="lot5是否混放:" prop="ismixedlot5str">
													<span>{{ props.row.ismixedlot5str }}</span>
												</el-form-item>
											</el-col>

											<el-col :span="4">
												<el-form-item label="lot6是否混放:" prop="ismixedlot6str">
													<span>{{ props.row.ismixedlot6str }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="lot7是否混放:" prop="ismixedlot7str">
													<span>{{ props.row.ismixedlot7str }}</span>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="4">
												<el-form-item label="lot8是否混放:" prop="ismixedlot8str">
													<span>{{ props.row.ismixedlot8str }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="lot9是否混放:" prop="ismixedlot9str">
													<span>{{ props.row.ismixedlot9str }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="lot10是否混放:" prop="ismixedlot10str">
													<span>{{ props.row.ismixedlot10str }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="lot11是否混放:" prop="ismixedlot11str">
													<span>{{ props.row.ismixedlot11str }}</span>
												</el-form-item>
											</el-col>

											<el-col :span="4">
												<el-form-item label="lot12是否混放:" prop="ismixedlot12str">
													<span>{{ props.row.ismixedlot12str }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="lot13是否混放:" prop="ismixedlot13str">
													<span>{{ props.row.ismixedlot13str }}</span>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="4">
												<el-form-item label="lot14是否混放:" prop="ismixedlot14str">
													<span>{{ props.row.ismixedlot14str }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="lot15是否混放:" prop="ismixedlot15str">
													<span>{{ props.row.ismixedlot15str }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="仓库:" prop="warehouse">
													<span>{{ props.row.warehouse }}</span>
												</el-form-item>
											</el-col>

											<el-col :span="4">
												<el-form-item label="长:" prop="length">
													<span>{{ props.row.length }}</span>
												</el-form-item>
											</el-col>

											<el-col :span="4">
												<el-form-item label="宽:" prop="width">
													<span>{{ props.row.width }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="高:" prop="height">
													<span>{{ props.row.height }}</span>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="4">
												<el-form-item label="重量:" prop="weight">
													<span>{{ props.row.weight }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="是否创建任务:" prop="iscreatestr">
													<span>{{ props.row.iscreatestr }}</span>
												</el-form-item>
											</el-col>
										</el-row>
									</el-form>
								</template>
							</el-table-column>
							<el-table-column label='操作' fixed="right" header-align="center" align="center" width="150">
								<template #default="scope">
									<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)"  v-if="hasPermission('lswms:location:update')" >修改
									</el-button>
									<el-button type="text" size="small" @click="deleteHandle(scope.row.id)"  v-if="hasPermission('lswms:location:delete')">删除
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
							:total="total" layout="total, sizes, prev, pager, next, jumper"
							@size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
						</el-pagination>
						<!-- 弹窗, 新增 / 修改 -->
						<locationAddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate"
							@refresh-data-list="getDataList">
						</locationAddOrUpdate>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
	import DataList from "@/utils/DataList";
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue';
	import locationAddOrUpdate from "@/components/lswms/base/LocationAddOrUpdate";
	import {
		getzonelist
	} from "@/network/lswms/base/Zone.js"
	import {
		getCodeListByCode
	} from "@/network/lswms/base/Codelist.js"

	import {hasPermission} from "@/utils/hasPermission"
	export default {
		name: "location",

		components: {
			locationAddOrUpdate,
		},

		setup() {
			const {
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate
			} = DataList();

			const zoneList = ref({});
			const getZoneListFn = () => {
				getzonelist().then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					zoneList.value = res.data;
				}).catch((err) => {});
			}

			onMounted(() => {
				mixinViewModuleOptions.value.getDataListIsPage = true;
				mixinViewModuleOptions.value.getDataListURL = '/lswms/location/page';
				mixinViewModuleOptions.value.deleteURL = '/lswms/location';
				mixinViewModuleOptions.value.exportURL = '/lswms/location/export';
				mixinViewModuleOptions.value.deleteIsBatchKey = 'id';
				mixinViewModuleOptions.value.deleteIsBatch = true
				if (mixinViewModuleOptions.value.activatedIsNeed) {
					getDataList();
				}
				getZoneListFn();
				locTypeFn();
				locStatusFn();
				locCategoryFn();
				IsmixedFn();
			})

			//获取库位类型
			const locTypeList = ref("");
			const locTypeFn = () => {
				getCodeListByCode('loc_type').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					locTypeList.value = res.data;
				}).catch((err) => {});
			}
			//获取库位状态
			const locStatusList = ref("");
			const locStatusFn = () => {
				getCodeListByCode('loc_status').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					locStatusList.value = res.data;
				}).catch((err) => {});
			}
			//获取库位类别
			const locCategoryList = ref("");
			const locCategoryFn = () => {
				getCodeListByCode('loc_category').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					locCategoryList.value = res.data;
				}).catch((err) => {});
			}
			//获取混放
			const IsmixedList = ref("");
			const IsmixedFn = () => {
				getCodeListByCode('Ismixed').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					IsmixedList.value = res.data;
				}).catch((err) => {});
			}

			return {
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate,
				zoneList,
				getZoneListFn,
				locTypeList,
				locStatusList,
				locCategoryList,
				IsmixedList
			}
		},
		methods:{
		     hasPermission
		}


	}
</script>

<style scoped>

</style>
